<template>
    <div>
       <!-- 搜索栏 -->
    <el-card id="search">
      <el-row>
        <el-col :span="18">
          <el-input placeholder="Select By Id" v-model="searchModel.id" clearable> </el-input>
          <el-button @click="getStockList" type="primary" icon="el-icon-search" round>查询</el-button>
        </el-col>
        <el-col :span="6" align="right">
          <el-button @click="openEditUI(null)" type="primary" icon="el-icon-plus" circle></el-button>
        </el-col>
      </el-row>
    </el-card>
    <!-- 结果列表 -->
    <el-card>
            <el-table :data="stockList" stripe style="width: 100%">
                <el-table-column label="#" width="80">
                    <template slot-scope="scope">
                        {{ (searchModel.pageNo - 1) * searchModel.pageSize + scope.$index + 1 }}
                    </template>
                </el-table-column>
                <el-table-column prop="id" label="pdid" width="180">
                </el-table-column>
                <el-table-column prop="pdname" label="pdname" width="180">
                </el-table-column>
                <el-table-column prop="number" label="pdnumber" width="180">
                </el-table-column>
                <el-table-column prop="pdorigiinid" label="origin" width="180">
                </el-table-column>
                <el-table-column label="img" width="120">
                    <template slot-scope="scope">
                        <img :src="scope.row.img" alt="Img" style="width: 50px; height: 50px; border-radius: 50%;" />
                    </template>
                </el-table-column>
                <el-table-column prop="pdcount" label="count">
                </el-table-column>
                <el-table-column prop="pdpriece" label="priece">
                </el-table-column>
                <el-table-column prop="isdeleted" label="isDeleted">
                </el-table-column>
      
                <!-- <el-table-column label="图片" width="120">
                    <template slot-scope="scope">
                        <img :src="" alt="Img" style="width: 50px; height: 50px; border-radius: 50%;" />
                    </template>
                </el-table-column> -->
                <el-table-column label="操作" width="180">
                    <template slot-scope="scope">
                        <el-button @click="openEditUI(scope.row.id)" type="primary" icon="el-icon-edit" circle
                            size="mini"></el-button>
                        <el-button @click="deleteStock(scope.row.number)" type="danger" icon="el-icon-delete" circle
                            size="mini"></el-button>
                        <el-button @click="goBack()" type="primary">返回</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="searchModel.pageNo" :page-sizes="[5, 10, 20, 50]" :page-size="searchModel.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>

        <el-dialog @close="clearForm" :title="title" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
            <el-form :model="stockForm" ref="stockFormRef" :rules="rules">
                <el-form-item prop="pdname" label="name" :label-width="formLabelWidth">
                    <el-input v-model="stockForm.pdname" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item prop="number" label="number" :label-width="formLabelWidth">
                    <el-input v-model="stockForm.number" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item prop="pdorigiinid" label="origin" :label-width="formLabelWidth">
                    <el-input v-model="stockForm.pdorigiinid" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item prop="pdcount" label="count" :label-width="formLabelWidth">
                    <el-input v-model="stockForm.pdcount" autocomplete="off"></el-input>
                </el-form-item>
              
                <el-form-item prop="pdpriece" label="priece" :label-width="formLabelWidth">
                    <el-input v-model="stockForm.pdpriece" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="Image" :label-width="formLabelWidth">
  <el-upload
    class="upload-demo"
    action="/oss/upload"
    :on-success="handleUploadSuccess"
    :on-error="handleUploadError"
    :file-list="fileList"
    name="file"
    drag
    multiple
  >
    <i class="el-icon-upload"></i>
    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
    <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>

  </el-upload>
  <img :src="stockForm.img" alt="Uploaded Image" v-if="stockForm.img" style="width: 100px; height: 100px;">

</el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveStock">确 定</el-button>
            </div>
        </el-dialog>
    </div>
  </template>
  
  <script>

import stockManager from '@/api/stockManager';


  export default {
   
    data() {
      console.log(this.searchModel); 
      return {
        fileList: [],
       
        rules: {

},
        formLabelWidth: '130px',
        originList: [],
        title: '',
        stockList: [],
        searchModel: {
                id: '',
                pageNo: 1,
                pageSize: 10
            },
            total: 0,
            dialogFormVisible: false,
            stockForm: {}
      };


    },
   
        
    methods: {
        handleUploadSuccess(response, file) {
      // 上传成功后的处理逻辑
      this.$message({
        message: '文件上传成功',
        type: 'success',
       
      });
      //获取到后端返回的文件URL，进行处理
      this.stockForm.img = response
    
    
    },
    handleUploadError(err, file) {
      // 上传失败后的处理逻辑
      this.$message.error('文件上传失败');
      console.error(err);
    },
  
      saveStock() {
         // 触发表单验证
         this.$refs.stockFormRef.validate((valid) => {
                if (valid) {
                    // 提交保存请求
                    stockManager.saveStock(this.stockForm).then(response => {
                        // 成功提示
                        this.$message({
                            message: response.message,
                            product: 'success'
                        });
                        // 关闭对话框
                        this.dialogFormVisible = false;
                        // 刷新表格数据
                        this.getStockList();
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
      openEditUI(number) {
            if (number == null) {
                this.title = '新增分类';
            } else {
                this.title = '修改分类';
                stockManager.getByStockId(number).then(response => {
                    this.stockForm = response.data;
                });
            }
            this.dialogFormVisible = true;
        },
      goBack() {
           
            this.searchModel.id = ''; // 清空用户名搜索条件
            this.searchModel.pageNo = 1;

            // 返回操作逻辑
            this.getStockList();
        },
        clearForm() {
            this.stockForm = {};
            this.$refs.stockFormRef.clearValidate();
        },
      handleSizeChange(pageSize) {
            this.searchModel.pageSize = pageSize;
            this.getStockList();
        },
        handleCurrentChange(pageNo) {
            this.searchModel.pageNo = pageNo;
            this.getStockList();
        },
      getStockList() {
            stockManager.getStockList(this.searchModel).then(response => {
                this.stockList = response.data.rows;
                this.total = response.data.total;
            });
        },
        deleteStock(number) {
          stockManager.deleteStock(number).then(() => {
      // 删除成功后执行的逻辑，比如重新获取库存列表
            this.getStockList();
    });
          
        }


    },
      created() {
        this.getStockList();
    }
    }
  
  
  </script>
  
  <style>
  /* 在这里编写组件的样式 */
  </style>